<template>
  <div class="app-container">
    <el-row>
      <el-col class="name_s">
        <el-form :inline="true" :model="searchData">
          <el-form-item>
            <el-input v-model="searchData.outTradeNo" size="medium" placeholder="订单号" clearable @clear="init" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="searchData.status" filterable placeholder="全部订单">
              <el-option label="全部订单" value="" />
              <el-option label="待付款" value="1" />
              <el-option label="配货中" value="2" />
              <el-option label="待发货" value="3" />
              <el-option label="待收货" value="4" />
              <el-option label="交易成功" value="5" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="warning" size="medium" icon="el-icon-search" @click="handerSearch">搜索
            </el-button>
            <el-button
              class="reset"
              type="info"
              size="medium"
              icon="el-icon-refresh-left"
              native-type="reset"
              @click="handerReset"
            >重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-card class="table_style">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="orders"
        element-loading-text="Loading"
        style="width: 100%"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column label="订单号" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.outTradeNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名">
          <template slot-scope="scope">
            <span>{{ scope.row.address.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式">
          <template slot-scope="scope">
            <span>{{ scope.row.address.tel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="primary">{{ scope.row.status|state }}</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">{{ scope.row.status|state }}</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="warning">{{ scope.row.status|state }}</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger">{{ scope.row.status|state }}</el-tag>
            <el-tag v-else type="info">{{ scope.row.status|state }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单金额">
          <template slot-scope="scope">
            <el-tag type="danger">{{ scope.row.totalPrice }} 元</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createdAt|order_format }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="right" enterable>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-star-off"
                @click="handleShow(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="footer_page"
        background
        layout="total, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.pageSize"
        hide-on-single-page
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import '../../filter'
import { fetchOrderList } from '@/api/order'

export default {
  filters: {
    state: (value) => {
      const arr = ['待付款', '配货中', '待发货', '待收货', '交易成功']
      return arr[value - 1]
    }
  },
  data() {
    return {
      listLoading: true,
      orders: [],
      searchData: {
        outTradeNo: '',
        status: ''
      },
      page: {
        total: 0,
        current_page: 1, // 当前页数
        pageSize: 0 // 每页显示多少条数据
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.listLoading = true
      // 定义搜索参数
      const params = {
        outTradeNo: this.searchData.outTradeNo,
        status: this.searchData.status,
        currentPage: this.page.current_page
      }
      const res = await fetchOrderList(params)
      this.orders = res.data.orders
      this.page = {
        total: res.data.pagination.total,
        pageSize: parseInt(res.data.pagination.pageSize),
        current_page: parseInt(res.data.pagination.current_page)
      }
      this.listLoading = false
    },
    handerSearch() {
      this.init()
    },
    // 搜索后重置搜索内容
    handerReset() {
      this.searchData = {
        outTradeNo: '',
        status: ''
      }
      this.init()
    },
    handleCurrentChange(val) {
      this.page.current_page = val
      this.init()
    },
    // 查看详情
    handleShow(row) {
      this.$router.push({
        name: 'OrderShow',
        params: { id: row.id }
      })
    }
  }
}
</script>

<style scoped>
.footer_page {
  margin-top: 20px;
}
</style>
